<%--
  Created by IntelliJ IDEA.
  User: zheng
  Date: 2021/6/24
  Time: 15:07
  登陆界面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" sizes="16px" href="${pageContext.request.contextPath}/statics/images/icon.png"/>

    <title>芜湖起飞 - 登录</title>


    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/login.css"/>

</head>

<body>
<h1 class="logo"><img src="${pageContext.request.contextPath}/statics/images/icon.png" width="45px"><a class="photo">芜湖起飞</a></h1>

<div class="container-fluid">
    <div class="row bg">

        <div class="welcome col-lg-6 col-lg-offset-1 col-lg-4">
            <div class="title">
                <div>欢迎来到</div>
                <div>芜湖起飞</div>
            </div>

            <p class="comment"><br/>汉服，全称是“汉民族传统服饰”，又称汉衣冠、汉装、华服，
                是从黄帝即位到公元17世纪中叶（明末清初），
                在汉族的主要居住区，以“华夏－汉”文化为背景和主导思想，
                以华夏礼仪文化为中心，通过自然演化而形成的具有独特汉民族风貌性格。
            </p>
        </div>

        <div class="col-sm-offset-1 col-sm-4 col-xs-offset-2 col-xs-8 col-lg-3 form">
            <div class="main">
                <!-- 顶部登录横条 -->
                <div class="switch" onclick="toLogin();" id="topLogin">
                    已经购票？立即登录
                </div>
                <div class="loginPart" id="lp">
                    <h2>乘客登录</h2>
                    <input id="phone" class="inp" type="text" placeholder="输入预留手机号码"/>
                    <input id="pwd" class="inp" type="password" placeholder="输入验证码"/>
                    <a href="#" class="pwa">忘记密码?</a>
                    <input id="submit" class="subtn" type="button" value="登录" onclick="login()"/>
                </div>
                <div class="regPart" id="rp">
                    <h3>在线购票</h3>
                    <input id="phoneR" class="inp" type="text" placeholder="输入预留手机号码"/>
                    <input id="email" class="inp" type="text" placeholder="输入邮箱"/>
                    <input id="pwdR" class="inp" type="password" placeholder="输入验证码"/>
                    <div class="inp-selects">
                        <select class="inp-select" id="sexc">
                            <option value="man">男</option>
                            <option value="women">女</option>
                        </select>
                        <select class="inp-select" id="spc">
                            <option value="1">正常人</option>
                            <option value="2">残疾人</option>
                            <option value="3">孕妇</option>
                        </select>
                        <input class="inp-select" type="number" min="1" max="120" placeholder="年龄" id="agec"/>
                    </div>
                    <input id="submitR" class="subtn" type="button" value="购票" onclick="register()"/>
                </div>
                <!-- 底部注册横条 -->
                <div class="switch" id="bottomregister" onclick="toLogin()">
                    还未购票？立即购票
                </div>
            </div>

        </div>
    </div>


    <div class="footer">
        <a href="https://beian.miit.gov.cn/">粤ICP备2020103045号</a>
        <a>第一实训小组作业-芜湖起飞</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var loginbtn = document.querySelector('#topLogin');
    var regbtn = document.querySelector('#bottomregister');
    var lop = document.querySelector('#lp');
    var rep = document.querySelector('#rp');

    onload = function () {
        loginbtn.classList.toggle("is-display");
        rep.classList.toggle("is-display");
    }

    function toLogin() {
        regbtn.classList.toggle("is-display");
        lop.classList.toggle("is-display");
        loginbtn.classList.toggle("is-display");
        rep.classList.toggle("is-display");
    }

    function login() {
        $.ajax({
            url: "${pageContext.request.contextPath}/user/login.do",
            contentType: "application/json;charset=UTF-8",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({
                "phone": $("#phone").val(),
                "pwd": $("#pwd").val()
            }),
            success: function (data) {
                console.log(data);
                if (data.code == 0) {
                    alert("登陆成功！");
                    window.location.href = "${pageContext.request.contextPath}/index";
                } else {
                    alert(data.message);
                    $('#pwd').val("");
                }
            }
        })
    }

    function register(){
        if($('#phoneR').val()=="" || $('#pwdR').val()==""|| $('#sexc').val()==""|| $('#agec').val()==""|| $('#spc').val()==""|| $('#email').val()==""){
            alert("请填写完整信息!");
            return;
        }
        var sex;
        var age = parseInt($('#agec').val()); //年龄转化
        var spacialR = parseInt($('#spc').val()); //特殊人士转化 1：正常人 2：残疾人 3：孕妇

        if($('#sexc').val() == 'women'){
            sex = 1; //女
        }else{
            sex = 0; //男
        };



        $.ajax({
            url: "${pageContext.request.contextPath}/user/register.do",
            contentType: "application/json;charset=UTF-8",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({
                "user_phone": $("#phoneR").val(),
                "user_pwd": $("#pwdR").val(),
                "user_age":age,
                "user_email":$("#email").val(),
                "user_special":spacialR,
                "user_sex":sex
            }),
            success: function (data) {
                console.log(data);
                if (data.code == 0) {
                    alert("注册成功");
                    window.location.reload();
                } else {
                    alert(data.message);
                }
            }
        });
    }

</script>
</body>

</html>
